/*
 * @Author: caijw 
 * @Date: 2018-11-11 13:14:20 
 * @Last Modified by: caijw
 * @Last Modified time: 2018-12-02 02:53:09
 * 
 * 修改账号
 */

import React, { Component } from 'react';
import Header from '../../../../components/Header/Header';
import '../../../../static/css/common.less';
import '../../../../static/css/weui.less';
import * as actions from '../../../../store/action/my';
import { connect } from "react-redux";
import { Toast, Toptips } from 'react-weui';
import { CityPicker,Button } from 'react-weui';
import cnCity from './cnCity';
import './address.less';

class EditAddress extends Component {  

    state = {
        showToast : {
            show : false,
        },
        city_show: false,
        city_value: '',
        province_code : '',
        city_code : '',
        district_code : '',
        receiver : '',
        address : '',
        phone : ''
    }

    async componentWillMount(){
        this.id = this.props.match.params.id;
        this.selected = this.props.match.params.cityId.split(':');
        await this.props.getAddressItem(this.id);


        setTimeout(()=>{
            this.setState({
                city_value :  this.props.my.addressDetail.province.name + ' ' + this.props.my.addressDetail.city.name +' ' + this.props.my.addressDetail.district.name,
                receiver : this.props.my.addressDetail.receiver,
                address : this.props.my.addressDetail.address,
                phone : this.props.my.addressDetail.phone,
                province_code : this.props.my.addressDetail.province_code,
                city_code : this.props.my.addressDetail.city_code,
                district_code : this.props.my.addressDetail.district_code,
            })

        },500);
    }

    selectedCity(){
        let province_code = this.props.my.addressDetail.province_code;
        let city_code =  this.props.my.addressDetail.city_code;
        let district_code =  this.props.my.addressDetail.district_code;

        var arr = [];
        let cityArr = [];
        cnCity.forEach((item, key)=>{
            if(item.code == province_code){
                cityArr = item.sub;
                arr.push(key);
            }
        })
        let districtArr = [];
        cityArr.forEach((item, key)=>{
            if(item.code == city_code){
                districtArr = item.sub;
                arr.push(key);
            }
        })
        districtArr.forEach((item,key)=>{
            if(item.code == district_code){
                arr.push(key);
            }
        })

        this.setState({
            selected : arr
        })
    }


    //提交代码
    submit = (e) =>{
        e.preventDefault();
        let address = this.state.address;
        let phone = this.state.phone;
        let receiver = this.state.receiver;
        let province_code = this.state.province_code;
        let city_code = this.state.city_code;
        let district_code = this.state.district_code;
        let data = {
            address:address,
            phone:phone,
            receiver:receiver,
            district_code : district_code,
            city_code : city_code,
            province_code : province_code,
            priority : 1
        }
        this.props.pathAddressItem(this.id, data); 

    }

    //提示信息
    componentWillReceiveProps(){
        setTimeout(()=>{
            if(this.props.my.addressRet == 0){
                //this.setState({sign : {display : 'block' }});
            }else{
                if(this.props.my.addressRet == -1){
                    this.setState({showToast: {show: true}});
                    this.state.toastTimer = setTimeout(()=> {
                        this.setState({showToast: {show: false}});
                    }, 2000);
                }
            }
        },100)
    }
    

    //改变城市返回编号
    changeCity = (text) =>{
        this.setState({city_value: text, city_show: false});
        let province = text.split(' ')[0];
        let city = text.split(' ')[1]
        let district = text.split(' ')[2];

        let cityArr = [];
        cnCity.forEach((item)=>{
            if(item.name == province){
                cityArr = item.sub;
                this.setState({province_code: item.code});
            }
        })
        let districtArr = [];
        cityArr.forEach((item)=>{
            if(item.name == city){
                districtArr = item.sub;
                this.setState({city_code: item.code});
            }
        })
        districtArr.forEach((item)=>{
            if(item.name == district){
                this.setState({district_code: item.code});
            }
        })
    }


    changeReceiver = (e) =>{
       this.setState({
           receiver : e.target.value
       })
    }
 

    render() {
        return (
            <div>
                <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast>
                <Toptips type="info" show={this.state.showToast.show}>{this.props.my.addressMsg}</Toptips>
                <div className="detail-region picker">
                    <Header title="修改地址"></Header>
                    <CityPicker
                        data={cnCity}
                        onCancel={e=>this.setState({city_show: false})}
                        onChange={this.changeCity}
                        show={this.state.city_show}
                        selected={this.selected}
                    />

                    <section class="content">
                       <div className="sumbit-item">
                            <input type="text" placeholder="请输入收货人名称" value={this.state.receiver} onChange={this.changeReceiver}  required></input>
                       </div>
                       <div className="sumbit-item">
                            <input type="text" placeholder="请输入手机号码" value={this.state.phone} onChange={e=>{this.setState({phone:e.target.value}) }} required></input>
                       </div>
                       <div className="sumbit-item">
                                <input type="text"
                                value={this.state.city_value}
                                onClick={ e=> {
                                    e.preventDefault();
                                    this.setState({city_show: true})
                                }}
                                placeholder="请选择地址"
                                readOnly={true}
                            />
                       </div>
                       <div className="sumbit-item">
                            <textarea type="text" placeholder="请输入详细地址" value={this.state.address} onChange={e=>{this.setState({address:e.target.value}) }} required></textarea>
                       </div>
                       <button className="submit-btn"  onClick={this.submit}>保存</button>
                    </section>
                </div>
            </div>
        )
    }
}

//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(EditAddress);